<template>
    <div>
        <div class="title">热销推荐</div>
        <ul>
            <li class="item" v-for="item of recommendList" :key="item.id">
                <div class="wrapper">
                    <img class="item-img" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="btn">查看详情</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'recommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus"  scoped>
  @import '~styles/mixins.styl'
    .title
      margin-top : .2rem
      padding-left :.2rem
      font-size :.3rem
      line-height .8rem
      background: #808080
      color :#fff
    .item
      display :flex
      height :2rem
      .item-img
        height :1.7rem
        width :2.3rem
        padding :.1rem
      .item-info
         flex: 1
         .item-title
           line-height :.7rem
           font-size :.32rem
           font-weight :600
           ellipsis()
         .item-desc
           line-height :.35rem
           color :#808080
         .btn
           border-radius :.1rem
           background: #ffa400
           color :white
           font-weight :900
           font-size :.27rem

</style>
